<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查找元素</title>
</head>

<body>
    <h3>使用Document.prototype提供的函数来查找页面上的元素</h3>
    <div class="container first" id="first">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="container second" id="second">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="container fourth">
        <input type="radio" name="gender" value="male">靓仔
        <input type="radio" name="gender" value="female">靓妹
    </div>

    <script type="text/javascript">
        // 根据 元素的 标识符（即id属性值） 来获得元素
        let f = document.getElementById('first');
        console.log(f);

        // 根据标记名称来选择元素( 返回一个 HTMLCollection 集合 )
        let lis = document.getElementsByTagName('li');
        console.log(lis, Array.isArray(lis));

        let liArray = Array.from(lis); // 将 类数组对象 转换为 数组对象
        console.log(liArray, Array.isArray(liArray));

        let containers = document.getElementsByClassName('container');
        console.log(containers, Array.isArray(containers));

        // 根据元素的name属性值来选择元素( 返回一个 NodeList 集合 )
        let genders = document.getElementsByName('gender');
        console.log(genders, Array.isArray(genders));

        // 选择 匹配 选择器 的 第一个元素 (返回单个元素或null)
        let first = document.querySelector('.first.container');
        console.log(first);

        let second = document.querySelector('.second .container');
        console.log(second); //输出null，两个选择器中间不能有空格符

        // 选择 匹配 选择器 的 所有元素(返回一个NodeList集合，若未选中任何元素则集合为空)
        let uls = document.querySelectorAll('ul');
        console.log(uls, Array.isArray(uls));
    </script>

</body>

</html>